<template>
    <lay-container :fluid="true" style="padding: 10px;padding-top: 10px;">
        <lay-card style="padding:40px;">
            <lay-row>
                <lay-col :md="22" :md-offset="1">
                    <lay-card class="textUser">
                        {{ info.deptName }} {{ form.nickName }}，你的岗位是： {{ info.postName }} ，角色是：{{ info.groupName }}
                    </lay-card>
                </lay-col>
            </lay-row>
            <lay-row>
                <lay-form :model="form">
                    <lay-col :md="4">
                        <UploadAvatar v-model="form.avatar"></UploadAvatar>
                    </lay-col>
                    <lay-col :md="2"></lay-col>
                    <lay-col :md="16">
                        <lay-form-item label="姓名" prop="nickName" required required-error-message="姓名不能空">
                            <lay-col md="6">
                                <lay-input v-model="form.nickName"></lay-input>
                            </lay-col>
                        </lay-form-item>
                        <lay-form-item label="性别" prop="sex">
                            <lay-radio v-model="form.sex" name="sex" :value="1">男</lay-radio>
                            <lay-radio v-model="form.sex" name="sex" :value="2">女</lay-radio>
                        </lay-form-item>

                        <lay-form-item label="联系电话" prop="phone" required>
                            <lay-col md="6">
                                <lay-input v-model="form.phone"></lay-input>
                            </lay-col>
                        </lay-form-item>

                        <lay-form-item label="旧密码" prop="OldPassword">
                            <lay-col md="6">
                                <lay-input v-model="form.OldPassword"></lay-input>
                            </lay-col>
                            <lay-col md="10" class="tip">如修改密码，请填写旧密码以验证身份</lay-col>
                        </lay-form-item>
                        <lay-form-item label="新密码" prop="Password">
                            <lay-col md="6">
                                <lay-input v-model="form.Password"></lay-input>
                            </lay-col>
                            <lay-col md="6" class="tip">新的密码</lay-col>
                        </lay-form-item>
                        <lay-form-item class="saveBtn">
                            <lay-button @click="submitClick" type="primary" v-permission="PerKey.User_UserChangeEdit"
                            prefix-icon="layui-icon-ok">保存
                            </lay-button>
                        </lay-form-item>
                    </lay-col>
                </lay-form>
            </lay-row>
        </lay-card>
    </lay-container>
</template>
<script lang="ts" setup>
import { reactive, toRefs } from "vue";
import { layer } from "@layui/layer-vue";
import { userChangeInfo, upuserInfo } from "../../../api/module/user/user";
import { PerKey } from "../../../library/permissionConst"
import UploadAvatar from '../../../layouts/Upload/UploadAvatar.vue'
import { UserChangeInfo } from '../../../types/user'
import { useUserStore } from "../../../store/user";

const data = reactive({
    form: <UserChangeInfo><unknown>[],
    info: {
        groupName: "",
        deptName: "",
        postName: ""
    }
})
const { form, info } = toRefs(data)
userChangeInfo().then((res) => {
    if (res.status == 1) {
        let data = res.data.data
        form.value = data
        info.value = {
            groupName: data.groupName
            , deptName: data.deptName
            , postName: data.postName
        }
    }
})
const submitClick = function () {
    upuserInfo(form.value).then((res) => {
        if (res.status == 1) {
            layer.msg(res.msg, { time: 1000, icon: 1 }, () => {
                const userInfoStore = useUserStore();
                userInfoStore.userInfo.nickName = form.value.nickName
                userInfoStore.userInfo.phone = form.value.phone
                userInfoStore.userInfo.sex = form.value.sex
                userInfoStore.userInfo.avatar = form.value.avatar
            });
        } else {
            layer.msg(res.msg, { icon: 2 });
            return false;
        }
    });
};
</script>
<style scoped>
.textUser {
    line-height: 38px;
    height: inherit;
    font-size: 18px;
    padding: 10px;
    margin-bottom: 20px;
}
</style>